<table class="table table-sm table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Category</th>
      <th>Price</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let p of getProducts()">
      <td>{{ p.id }}</td>
      <td>{{ p.name }}</td>
      <td>{{ p.category }}</td>
      <td>{{ p.price }}</td>
      <td>
        <button
          class="btn btn-sm btn-warning m-1"
          [routerLink]="['/admin/main/products/edit', p.id]"
        >
          Edit
        </button>
        <button class="btn btn-sm btn-danger" (click)="deleteProduct(p.id)">
          Delete
        </button>
      </td>
    </tr>
  </tbody>
</table>
<button class="btn btn-primary" routerLink="/admin/main/products/create">
    Create New Product
</button>